<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>药品信息列表</title>
</head>
<body>
<a th:href="@{/addMedicine}">添加药品</a>
<input type="text">
<button>查询</button>
<table border="1" align="center">
    <tr>
        <td>序号</td>
        <td>药品名</td>
        <td>价格</td>
        <td>详情</td>
       <!-- <td>班级</td>-->
        <td>修改</td>
        <td>删除</td>

    </tr>
<tr th:each="mes:${mes}">
    <td th:text="${mes.id}"></td>
    <td th:text="${mes.drugname}"></td>
    <td th:text="${mes.price}"></td>
    <td th:text="${mes.drugdetail}"></td>
   <!-- <td th:text="${stu.classno}"></td>-->
    <td><a th:href="@{/updateMedicine/}+${mes.id}">修改</a></td>
    <td><a th:href="@{/delectMedicine/}+${mes.id}">删除</a></td>
</tr>

</table>
</body>
<script>

    // 调用API
    function callAPI(url, data, callback) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onload = function () {
            if (xhr.status === 200) {
                const responseData = JSON.parse(xhr.responseText);
                console.log(responseData);
                if (callback) callback(responseData);
            } else {
                console.error("请求失败，状态码：", xhr.status);
            }
        };

        xhr.onerror = function () {
            console.error("请求出错");
        };
        xhr.send(JSON.stringify(data));
    }

    callAPI("http://localhost:8080/mes")
</script>
</html>